<script setup>
import { ref } from 'vue'
import axios from 'axios'

const testResult = ref('')
const loading = ref(false)

// 测试代理连接
const testProxy = async () => {
  loading.value = true
  testResult.value = '正在测试代理连接...'
  
  try {
    // 测试直接访问
    const directResult = await axios.get('https://29dd-117-172-173-23.ngrok-free.app/sysUser/login', {
      headers: {
        'ngrok-skip-browser-warning': 'true'
      }
    })
    
    testResult.value = `直接访问结果: ${JSON.stringify(directResult.data, null, 2)}`
  } catch (error) {
    testResult.value = `直接访问失败: ${error.message}\n\n正在测试代理访问...`
    
    try {
      // 测试代理访问
      const proxyResult = await axios.get('/api/sysUser/login')
      testResult.value += `\n\n代理访问结果: ${JSON.stringify(proxyResult.data, null, 2)}`
    } catch (proxyError) {
      testResult.value += `\n\n代理访问也失败: ${proxyError.message}`
    }
  } finally {
    loading.value = false
  }
}

// 测试登录API
const testLoginAPI = async () => {
  loading.value = true
  testResult.value = '正在测试登录API...'
  
  try {
    const result = await axios.post('/api/sysUser/login', {
      username: 'test',
      password: 'test'
    })
    
    testResult.value = `登录API测试结果: ${JSON.stringify(result.data, null, 2)}`
  } catch (error) {
    testResult.value = `登录API测试失败: ${error.message}\n\n响应数据: ${JSON.stringify(error.response?.data, null, 2)}`
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="proxy-test-container">
    <h2>代理测试页面</h2>
    
    <div class="test-buttons">
      <button @click="testProxy" :disabled="loading" class="test-btn">
        {{ loading ? '测试中...' : '测试代理连接' }}
      </button>
      
      <button @click="testLoginAPI" :disabled="loading" class="test-btn">
        {{ loading ? '测试中...' : '测试登录API' }}
      </button>
    </div>
    
    <div class="test-result">
      <pre>{{ testResult }}</pre>
    </div>
    
    <div class="info-box">
      <h3>代理配置说明:</h3>
      <ul>
        <li>开发环境: 请求 <code>/api/*</code> 会被代理到 <code>https://29dd-117-172-173-23.ngrok-free.app</code></li>
        <li>已添加 <code>ngrok-skip-browser-warning</code> 头来跳过 ngrok 警告</li>
        <li>已设置 <code>changeOrigin: true</code> 来解决跨域问题</li>
        <li>已设置 <code>secure: false</code> 来允许不安全的 HTTPS 连接</li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.proxy-test-container {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.test-buttons {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.test-btn {
  padding: 10px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.test-btn:hover:not(:disabled) {
  background: #5a67d8;
}

.test-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.test-result {
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
  max-height: 400px;
  overflow-y: auto;
}

.test-result pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.info-box {
  background: #ebf8ff;
  border: 1px solid #bee3f8;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
}

.info-box h3 {
  margin: 0 0 10px 0;
  color: #2b6cb0;
}

.info-box ul {
  margin: 0;
  padding-left: 20px;
}

.info-box li {
  margin: 5px 0;
  color: #4a5568;
}

.info-box code {
  background: #edf2f7;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}
</style> 